import { BasicColumn, FormSchema } from '/@/components/Table';
import { h } from 'vue';
import { commissionWithdrawalOrder } from '/@/api/model/financeModel';
import { Tag, Tooltip, Divider } from 'ant-design-vue';
import {
  stateRenderData,
  stateRenderColor,
  getWithdrawTimesData,
  stateRenderWithdrawalData,
  stateGameRecordWithdrawalColor,
} from '../common/const';

import dayjs from 'dayjs';

import { useI18n } from '/@/hooks/web/useI18n';
import { formatDate, toTimezone } from '/@/utils/dateUtil';
import cdBlockCurrency from '/@/components-cd/block/cd-block-currency.vue';
import cdBlockTwoline from '/@/components-cd/block/cd-block-twoline.vue';
import { SetTooltip, mwidth100, width120, width170 } from '/@/views/common/component';
import { auths } from '/@/utils/authFunction';
import { useAutoTableLabelWidth } from '/@/components/Form/src/hooks/useForm.js';

const { t } = useI18n();

const setTooltip = (text) => {
  return h(
    Tooltip,
    {
      title: text,
    },
    () =>
      h(
        'div',
        {
          style: { whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' },
        },
        text,
      ),
  );
};

// 表格内容
export const columns: BasicColumn[] = [
  {
    title: t('business.common_order_number'),
    dataIndex: 'order_number',
    width: width120,
    customRender: ({ record }) => {
      return SetTooltip(record.order_number, 15);
    },
  },
  {
    title: t('business.common_member_level'),
    dataIndex: 'level_name',
    minWidth: mwidth100,
    // customRender: ({ record }) => {
    //   return setTooltip(record.level_name);
    // },
  },
  {
    title: t('business.common_member_account'),
    dataIndex: 'username',
    minWidth: mwidth100,
    slots: { customRender: 'username' },
  },
  {
    title: t('business.common_actual_name'),
    dataIndex: 'realname',
    minWidth: mwidth100,
    // customRender: ({ record }) => {
    //   return setTooltip(record.realname);
    // },
  },
  {
    title: t('table.finance.finance_Withdrawal_status'),
    dataIndex: 'withdraw_count',
    minWidth: mwidth100,
    customRender: ({ record }) => {
      const withdraw_count = (record as commissionWithdrawalOrder).withdraw_count || 0;
      const text = getWithdrawTimesData(withdraw_count);
      return h('span', { style: { color: '#E91134' } }, text);
    },
  },
  {
    title: t('table.finance.finance_Withdrawal_currency'),
    dataIndex: 'currency_name',
    customRender: ({ record }) => {
      return h(cdBlockCurrency, { currencyName: record.currency_name });
    },
    minWidth: mwidth100,
  },
  {
    title: t('modalForm.finance.finance_help_payplatform'),
    dataIndex: 'withdraw_merchant',
    customRender: ({ record }) => {
      return record.withdraw_merchant ? record.withdraw_merchant : '-';
    },
    minWidth: mwidth100,
  },
  {
    title: t('table.finance.finance_Withdrawal_amount'),
    dataIndex: 'amount',
    minWidth: mwidth100,
    customRender: ({ record }) => {
      return h(
        // Tooltip,
        // {
        //   title: record.amount,
        // },
        () =>
          h(
            'div',
            {
              style: {
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis',
                overflow: 'hidden',
              },
            },
            record.amount,
          ),
      );
    },
  },
  // {
  //   title: t('table.finance.finance_exchange_amount'),
  //   dataIndex: 'rate_amount',
  //   width: 100,
  //   customRender: ({ record }) => {
  //     return setTooltip(record.rate_amount);
  //   },
  // },
  {
    title: t('table.finance.finance_handling_fee'),
    dataIndex: 'fee',
    minWidth: mwidth100,
    // customRender: ({ record }) => {
    //   return setTooltip(record.fee);
    // },
  },
  {
    title: t('table.finance.finance_actual_withdrawal'),
    dataIndex: 'finally_amount',
    minWidth: mwidth100,
    customRender: ({ record }) => {
      return h(
        // Tooltip,
        // {
        //   title: record.finally_amount,
        // },
        () =>
          h(
            'div',
            {
              style: {
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis',
                overflow: 'hidden',
                color: '#E91134',
              },
            },
            record.finally_amount,
          ),
      );
    },
  },
  {
    title: t('business.common_status'),
    dataIndex: 'state',
    minWidth: mwidth100,
    customRender: ({ record }) => {
      const state = (record as commissionWithdrawalOrder).state;
      return h(
        'div',
        { style: { color: stateGameRecordWithdrawalColor[state] } },
        stateRenderWithdrawalData[state],
      );
    },
  },
  {
    title: t('business.common_operate'),
    dataIndex: '',
    minWidth: mwidth100,
    slots: { customRender: 'action' },
    ifShow: auths(['20404', '20405']),
  },
  {
    title: `${t('business.common_submission_time')} / ${t('business.common_auditors_time')}`,
    dataIndex: 'created_at',
    width: width170,
    customRender: ({ record }) => {
      return h(cdBlockTwoline, {
        line1: toTimezone(record.created_at),
        line2: toTimezone(record.review_at),
      });
    },
  },
  {
    title: t('business.common_auditors'),
    dataIndex: 'review_name',
    minWidth: mwidth100,
    customRender: ({ record }) => {
      const review_name = record.review_name;
      return h('span', null, review_name ? review_name : '-');
    },
  },
];
useAutoTableLabelWidth(columns);
